<template>
  <div>
    <public-table-settings
      class="fr"
      style="display:inline-block"
      :table-thead-copy="columnsCopy"
      :table-thead.sync="columns"
      :table-scroll.sync="scroll">
      <a-button icon="setting"> 设置列</a-button>
    </public-table-settings>
    <br>
    <a-table id="a2" :style="{opacity:!overCSS?0:1}" :custom-row="customRow" :custom-header-row="customHeaderRow"
             bordered

             :columns="columns" :data-source="data" :scroll="{ x: 'max-content', y: 300 }">
      <a slot="action">action</a>
      <template v-for="item in columns" :slot="item.key" slot-scope="value,scope">
        <div :key="item.key" :class="'afffaaa '" style="color:blue;font-weight:700">
          <span :class="'afffaaa'+item.key">{{ scope[item.dataIndex] }}</span></div>
      </template>
      <!-- <template slot="addressThead">
        <span style="color:blue;font-weight:700">我是地址头啊</span>
      </template>
      <template slot="addressTbody" slot-scope="value,scope,index">
        <span style="color:yellow">{{ value }}-</span>
        <span style="color:blue">{{ scope.address }}+</span>
        <span style="color:blue">{{ index }}</span>
      </template> -->
    </a-table>
  </div>
  
</template>
<script>
const columns2 = [
  {
    // //定义表头就不能写title了
    // title: '地址',
    dataIndex: 'address',
    key: 'address',
    //定义表头
    slots: { title: 'addressThead' },
    //定义数据
    scopedSlots: {customRender: 'addressTbody'}
  }
]
const columns = [
  { title: '所属部门2',dataIndex: 'groupText', key: 'thead1', awaysShow: true,widths: 150 },
  { title: '客户经理',dataIndex: 'name', key: 'thead2' ,widths: 150},
  { title: '销售等级', dataIndex: 'saleLevel', key: 'thead3' , widths: 150},
  { title: '总首咨数', dataIndex: 'firstNum', key: 'thead4', widths: 150}, // 1总首咨人数
  { title: '跟进人数', dataIndex: 'followUpNum', key: 'thead5', widths: 150 }, // 1
  { title: '未跟进人数', dataIndex: 'unFollowUpNum', key: 'thead61' , widths: 150}, // 1
  { title: '未跟进人数', dataIndex: 'unFollowUpNum', key: 'thead62' , widths: 150}, // 1
  { title: '未跟进人数', dataIndex: 'unFollowUpNum', key: 'thead63' , widths: 150}, // 1
  { title: '未跟进人数', dataIndex: 'unFollowUpNum', key: 'thead64' , widths: 150}, // 1
  { title: '已反馈人数', dataIndex: 'feedbackNum', key: 'thead7' , widths: 150}, // 1
  { title: '未反馈人数', dataIndex: 'age', key: 'thead81', widths: 150 }, // 未反馈人数
  { title: '未反馈人数', dataIndex: 'age', key: 'thead82', widths: 150 }, // 未反馈人数
  { title: '未反馈人数', dataIndex: 'age', key: 'thead83', widths: 150 }, // 未反馈人数
  { title: '反馈率', dataIndex: 'address', key: 'thead91' , widths: 150}, // 1
  { title: '反馈率', dataIndex: 'address', key: 'thead94' , widths: 150}, // 1
  { title: '反馈率', dataIndex: 'address', key: 'thead95' , widths: 150}, // 1
  { title: '反馈率', dataIndex: 'address', key: 'thead96' , widths: 150}, // 1
  { title: '反馈率', dataIndex: 'address', key: 'thead97' , widths: 150}, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead101' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead102' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead103' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead104' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead105' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead106' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead107' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead108' }, // 1
  { title: '反馈无效人数', dataIndex: 'feedbackInvalidNum', key: 'thead109' } // 1
].map(item=>{
  item.scopedSlots = {customRender: String(item.key)}
  return item
})

console.log(columns)
const data = []

for (let i = 0; i < 100; i++) {
  if(i === 1){
    data.push({
      key: i,
      name: `我是姓名我很长但是最长不能超过200px ${i}`,
      groupText: `我是所属部门2 ${i * 10 * (i * 10)}`,
      saleLevel: `sadf ${i}`,
      firstNum: `lsaleLevelsaleLevel ${i}`,
      age: 32,
      address: `addressaddressLondon Park no. ${i}`
    })
  }else{
    data.push({
      key: i,
      name: `Edrward ${i}`,
      groupText: `asdf ${i * 10 * (i * 10)}`,
      saleLevel: `saleLevel ${i}`,
      firstNum: `firstNum ${i}`,
      age: 32,
      address: `addressaddressLondon Park no. ${i}`
    })
  }
}
export default {
  name: 'MyTable',

  data() {
    return {
      overCSS: false,
      data,
      columns: columns,
      columnsCopy: [],
      scroll: {y: 420},
      tableEl: '',
      widths: {},
      maxWidth: 200
    }
  },
  created(){
    this.columnsCopy = JSON.parse(JSON.stringify(columns))
    this.getDate2()
  },
  methods: {
    customRow(record, index){
      // console.log(record)
    },
    customHeaderRow(column, index){
      console.log('customHeaderRowcustomHeaderRowcustomHeaderRow')
    },
    getByteLen(val = '') {
      if(val && val.length){
        var len = 0

        for (var i = 0; i < val.length; i++) {
          var a = val.charAt(i)

          if (a.match(/[^\x00-\xff]/ig) !== null) {//\x00-\xff→GBK双字节编码范围
            len += 2
          } else {
            len += 1
          }
        }
        return len
      }
      return 0
      
      
    },
    getDate(){
      let widths = JSON.parse(JSON.stringify(this.widths))

      setTimeout(() => {
        this.columns.forEach((item,index) => {
          this.tableEl = document.getElementById('a2')
          // console.log(this.tableEl)
          let firstWidth = document.getElementById('a2').getElementsByClassName('afffaaa' + item.key)

          let maxWidth = 80
        
          firstWidth.forEach(item=>{
            let parseIntWidth = item.offsetWidth + 32

            // console.log(parseIntWidth)

            if(parseIntWidth > maxWidth) {
              maxWidth = parseIntWidth > this.maxWidth ? this.maxWidth : parseIntWidth
            }
          })
          console.log(maxWidth)
          widths[item.key] = maxWidth
        })
        console.log(widths)
        console.log(JSON.stringify(widths))
        console.log(JSON.stringify(this.widths))
        console.log(JSON.stringify(widths) === JSON.stringify(this.widths))
        if(JSON.stringify(widths) === JSON.stringify(this.widths)){
          console.log('不用转换')
        }else{
          this.widths = widths
          this.columns.forEach(item=>{
            item.width = widths[item.key]
          })
          this.columns = this.columns.concat()
          console.log(JSON.parse(JSON.stringify(this.columns)))
        }
        this.overCSS = true
      }, 1)
    },
    getDate2(){

      let widths = {}

      this.columns.forEach((item,index) => {
        let minWidth = 80

        let widthName = item.dataIndex

        let widthData = []
        

        this.data.forEach(item=>{
          widthData.push(item[widthName])
        })


        console.log(widthData)
        widthData.forEach(item=>{
          console.log(item,this.getByteLen(item))
          let parseIntWidth = this.getByteLen(item) * 12 + 32 > minWidth ? this.getByteLen(item) * 7.5 + 32 : minWidth

          // console.log(parseIntWidth)

          if(parseIntWidth > minWidth) {
            minWidth = parseIntWidth > this.maxWidth ? this.maxWidth : parseIntWidth
          }
        })
        // console.log(minWidth)
        widths[item.key] = minWidth
      })

      console.log(widths)
      // console.log(JSON.stringify(widths))
      // console.log(JSON.stringify(this.widths))
      // console.log(JSON.stringify(widths) === JSON.stringify(this.widths))
      this.widths = widths
      this.columns.forEach(item=>{
        item.width = widths[item.key]
      })
      this.columns = this.columns.concat()
      console.log(JSON.parse(JSON.stringify(this.columns)))
      this.overCSS = true
    }
  }
    
}
</script>
<style>
.afffaaa{min-width:100px;display: inline-block;}
/* .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  word-break:unset
} */
</style>